<template>

    <el-table :data="residentData" :cell-style="{ justifyContent: 'center' }" stripe
        style="width: 100%; --el-table-header-text-color: #333333;">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="_id" label="编号" align="center" />
        <el-table-column label="姓名" align="left">
            <template #default="scope">

                <img :src="scope.row.avatar" alt=""
                    style="height: 30px;width: 30px;margin-right: 5px;border-radius: 50%; box-shadow: 0px 0px 15px rgba(242, 242, 242, 1);">
                <span>{{ scope.row.name }}</span>

            </template>
        </el-table-column>
        <el-table-column prop="IDnumber" label="身份证号" align="center" width="160" />
        <el-table-column prop="phone" label="手机号码" align="center" width="120" />
        <el-table-column prop="state" label="签约状态" align="center" width="80">
            <template #default="scope">
                <span v-if="scope.row.state == 2" style="color: #28D094;">签约生效中</span>
                <span v-if="scope.row.state == 1" style="color:greenyellow;">签约中</span>
                <span v-if="scope.row.state == 0" style="color:orange;">待签约</span>
                <span v-if="scope.row.state == 3" style="color: gray;">待续约</span>
            </template>
        </el-table-column>

        <el-table-column prop="state" label="用户标签" align="center" width="auto">
            <template #default="scope">

                <el-tag type="danger" effect="light" round>
                    高血压
                </el-tag>
                <el-tag type="primary" effect="light" round>
                    冠心病
                </el-tag>
                <el-tag type="warning" effect="light" round>
                    高血糖
                </el-tag>

            </template>
        </el-table-column>
        <el-table-column prop="state" label="居民状态" align="center" width="80">
            <template #default="scope">
                <el-switch v-model="state" class="ml-2" inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cccccc" active-text="启用"
                    inactive-text="禁用" />
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="290">
            <template #default="scope">
                <div style="display: flex;align-items: center;justify-content: center;">
                    <el-button type="primary" link @click="toDetail(scope.row._id)" permission="居民详情">查看详情</el-button>
                    <el-button type="primary" link @click="toUpdate(scope.row._id)" permission="编辑居民档案">编辑</el-button>
                    <el-button type="primary" link>发消息</el-button>
                    <el-button type="primary" link @click="addService(scope.row._id)">添加服务</el-button>
                    <el-button type="danger" link @click="open(scope.row._id)">删除</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { deleteREsidentApi, findResidentInfoApi } from '../../../api/resident'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const open = (data) => {
    ElMessageBox.confirm(
        '居民信息删除后无法恢复,确认要删除吗?',
        '删除确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteResident(data)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}


// 跳转修改页
function toUpdate(data) {
    router.push('/resident/update/' + data)
}
// 跳转详情页
function toDetail(data) {
    router.push('/resident/detail/' + data)
}

onMounted(() => {
    findResident()
})
const state = ref(true)
const prop = defineProps(['pageData', 'searchData'])

watch(prop, () => {
    findResident()
}, { deep: true })

// 居民数据
const residentData = ref([])
const total = defineModel()

// 获取居民数据
function findResident() {
    findResidentInfoApi({ ...prop.pageData, ...prop.searchData })
        .then(res => {
            if (res.code == 200) {
                residentData.value = res.data.rows
                total.value = res.data.total
            }
        })
}


// 前往服务
function addService(data) {
    router.push('/service/update/' + data)
}

// 删除居民
function deleteResident(data) {
    deleteREsidentApi({ _id: data })
        .then(res => {
            if (res.code == 200) {
                findResident()
                ElMessage({
                    message: '居民信息删除成功',
                    type: 'success',
                })
            } else {
                ElMessage.error(res.message)
            }
        })
}
</script>

<style scoped>
.tag-bar {
    display: inline-block;
    display: flex;
    flex-wrap: nowrap;
}

.tag-bar .el-tag:not(:last-child) {
    margin-right: 5px;
}
</style>